<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery 属性操作</title>
</head>
<br>
<div class="div0"> hello div0</div>
<div class="outer" id="div1">hello div
    <div class="ininer">
        ininer
        <p> inner p</p>
        <div>孙子代</div>
    </div>
    <p class="p" id="p1">helllo p</p>
    <a href="" class="a" id="a"> hello a </a>

</div>
<div class="div2"> hello div2</div>
<div class="div3"> hello div3</div>
<ul>
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
    <li>44444</li>
    <li>55555</li>
    <li>66666</li>
    <li>77777</li>
    <li>88888</li>
    <li>99999</li>
    <li>10000</li>
    <li>12222</li>
</ul>
<table bgcolor="#8fbc8f" border="1px" cellspacing="2" cellpadding="1">
    <thead>
        <tr>
            <td>www0</td>
            <td>wwwww0</td>
            <td>wwwwww0</td>
        </tr>
    </thead>
    <tbody>
    <tr>
        <td>dddd</td>
        <td>wwr</td>
        <td>wwy</td>
    </tr>
    <tr>
        <td>dddd1</td>
        <td>wwr1</td>
        <td>wwy1</td>
        <td>wwy1</td>
    </tr>
    </tbody>
    <tr>
        <td>dddd</td>
        <td>wwr</td>
        <td>wwy</td>
    </tr>

</table>
<input  class="alex" type="text"><br>
<input type="text"><br>
<input type="checkbox"><br>
<input type="password">

<!--https://www.bootcdn.cn/-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    $('ul li').each(function (i,v) {
        console.log(i,v);
        if(i==6){
            return false
        }
    });

    console.log('****************');
    $.each($("ul li"),function (i,v) {
        console.log(i,v);
    });
//    $('div').css('color','red')
//-------------一.基本选择器----------------------
//      1.$("*"),所有标签
//       $('*').css('color','red');
    // 2.$("#") id属性查找
//    $('#p1').css('color','red');
//    3.$(".") class属性查找
//    $('.outer').css('color','red');
//    console.log($('.outer'));
//    4..$("element") 标签名查找
//     $(".inner").css('color','red');
//--------------二.层级选择器----------------------
//1.后代选择器
//    $(".outer p").css('color','red');
//2.子代选择器
//        $(".outer>p").css('color','red');
//2.毗邻选择器 向下找
//$(".div0+div").css('color','red');
//3.选择器 向下找 不要求毗邻
//$(".div0~div").css('color','red');
//  --------------三、基本筛选器-------------------
        //第一个
//    $('li:first').css('color','red');
//    //    最后一个
//    $('li:last').css('color','red');
    //奇数行
//    $('li:odd').css('color','red');
//    //    偶数行
//    $('li:even').css('color','yellow');
    $('li:eq(0)').css('color','red');
    $('li:eq(2)').css('color','yellow');
//    大于第三个
    $('li:gt(2)').css('color','blue');
//    小于第四个
    $('li:lt(4)').css('color','red');
    console.log($('li'));


//    ------属性选择器-------------------

$("[type='text']").css({'width':'200px','height':'100px',"background-color":"#ff0000"});

$(".alex").css({'width':'200px','height':'100px',"background-color":"#fff999"});
//$('table tr td:eq(1)').css('color','red');
$('table tr td:odd').css('color','green');
    console.log($('table tr td:eq(1)'))
</script>

</body>
</html>